@import url('meta');


.datepicker {

    //margin-top: -14px;
    @basic_motion: all .3s;
    ._transition {
        -webkit-transition: @basic_motion;
        -o-transition: @basic_motion;
        transition: @basic_motion;
    }
   // position: relative;
    //width: 250px;


    >.content{
        //margin-top: 14px;
        font-size: 1.4rem;
        color: #333;
        //display: flex;
        display: flex;
        background-color: #FFFFff;

        ._input {
            display: flex;

            flex: 1;
            align-items:center;
            justify-content:center;

            cursor: pointer;
            //width: 100%;
            //line-height: 25px;
            //height: 30px;
            //padding: 10px;
            color: #01b4ed;
            //text-align: center;
            padding:16px 0;

            .img{
                width: 0.9rem;
                height: 0.5rem;
                margin-left: 5px;
            }

        }
    }
    >._picker {
        ._transition;
        height: 0;
        opacity: 0;
        overflow: hidden;
        visibility: hidden;
        //position: absolute;
        z-index: 1000;
        left: 0;
        //top: 29px;
        width: 100%;
    }
    &._active {
        >._picker {
            ._transition;
            opacity: 1;
            height: auto;
            visibility: visible;
            overflow: initial;
            width: 100%;
        }
    }
}

.calender,.calender2 {
    //border: 1px solid @gray_b;
    position: relative;
    //width: 250px;
    width: 100%;
    overflow: hidden;
    >._label {
        background: @gray_c;
        color: @black_c;
        padding: 15px 10px 5px;
        >._year {
            font-size: 30px;
        }
        >._date {
            font-size: 1rem;
        }
        a {
            color: @blue;
        }
    }

    table {
        width: 100%;
        font-size: 1rem;
        //background-color: #FFFFff;
        th, td {
            text-align: center;
            vertical-align: middle;
            padding:1rem 0;
            padding-left: 1.5rem;
        }

    }

    ._picker-label {
        height: 60px;
        position: relative;
        background: @white;
        overflow: hidden;
        text-align: center;
        vertical-align: middle;
        padding-top: .5rem;
        ._nav, ._link {
            display: block;
            height: 100%;
            float: left;
            width: 10%;
            line-height: 30px;
        }

        ._link {
            cursor: pointer;
            width: 80%;
            ._year-link, ._month-link {
                color: @blue;
            }
        }

        ._nav {
            width: 10%;
            padding-top: 10px;
            >i {
                line-height: 100%;
                border-width: 1px;
                display: block;
                margin-left: 8px;
                font-size: 1rem;
                width: 14px;
                height: 14px;
                border-style: solid;
                -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                -o-transform: rotate(45deg);
                transform: rotate(45deg);
            }
        }

        ._pre {
            padding-left: 1rem;
            >i {
                border-color: transparent transparent @blue @blue;
            }
        }
        ._next {
            i {
                border-color: @blue @blue transparent transparent;
            }
        }
    }

    >._year-picker, >._month-picker {
        font-size: 1rem;
        text-align: center;
        >ul {
            overflow: hidden;
            background: @gray_c;
            padding: 0;
            >li {
                list-style-type: none;
                float: left;
                width: 25%;
                padding: 15px 10px;
                ._active {
                    color: @black;
                }
            }
        }
    }

    >._month-picker {
        ._picker-label ._link {
            width: 100%;
        }
    }

    >._day-picker {
        font-size: 1rem;
        table {
            background: #FFFFff;
        }

        ._week {
            color: @gray_a;
            width:100%;
            th, td {
                text-align: center;
                vertical-align: middle;
                padding: 3px !important;
            }
        }

        ._day {
            border-radius: 50%;
            display: block;
            line-height: 40px;
            height: 40px;
            width: 40px;
            color: #333;

            text-decoration:none;
        }

        ._today {
            color: @gray_a;
            border: 1px solid @gray_b;
        }
        ._active {
            background: @gray_b;
            color: @gray_a;
        }
        span.noclick {
            color: #ccc;
            text-decoration:none;
        }
        span._disabled {
            color: #ccc;
            text-decoration:none;
        }
    }
}
